<template>
  <div class="abc">
    <div class="Recommend">
      <div class="loginbox" v-if="this.loginbox == 0">
        <div v-if="regi == 1">
          <el-form :model="loginForm" ref="loginFormRef">
            <span class="loginbox_header"
              >登录
              <i
                class="el-icon-close"
                style="position: absolute; right: 5px; top: 12.5px"
                @click="toLogin()"
              ></i>
            </span>
            <img
              src="@/assets/images/login.png"
              alt=""
              style="margin-left: 135px"
            />
            <el-input
              v-model="loginForm.username"
              placeholder="手机号/网易邮箱"
            ></el-input>
            <el-input
              placeholder="请输入密码"
              v-model="loginForm.password"
              show-password
            ></el-input>
            <el-button
              type="info"
              style="margin-left: 100px; margin-top: 25px"
              @click="login()"
              >手机号登录</el-button
            >
            <el-button type="info" style="margin-left: 80px" @click="loginE()"
              >邮箱登录</el-button
            >
            <div style="float: right">
              <el-button size="mini" @click="toRegister()">注册</el-button>
            </div>
          </el-form>
        </div>
        <div v-if="regi == 0" v-show="ll==1">
          <span class="loginbox_header"
            >注册
            <i
              class="el-icon-close"
              style="position: absolute; right: 5px; top: 12.5px"
              @click="toLogin()"
            ></i>
          </span>
          <div>
            <div style="width: 70%; height: 70%; margin: 0 auto">
              <div style="margin-top: 40px">手机号:</div>
              <div>
                <el-input
                  v-model="reForm.username"
                  placeholder="请输入手机号"
                ></el-input>
              </div>
              <div style="marign-top: 30px">密码：</div>
              <div>
                <el-input
                  v-model="reForm.password"
                  placeholder="请输入密码"
                ></el-input>
              </div>
              <el-button
                type="primary"
                style="width: 70%; margin-top: 60px; margin-left: 50px"
                @click="register()"
                >提交</el-button
              >
            </div>
          </div>
        </div>
        <div v-if="il==0" v-show="ll==0">
          <span class="loginbox_header"
            >手机号注册
            <i
              class="el-icon-close"
              style="position: absolute; right: 5px; top: 12.5px"
              @click="toLogin()"
            ></i>
          </span>
          <div>
            <div style="width: 70%; height: 70%; margin: 0 auto">
              <div style="margin-top: 40px">手机号:{{this.reForm.username}}</div>
              
              <div style="marign-top: 30px">验证码：</div>
              <div>
                <el-input
                  v-model="reForm.yzm"
                  placeholder="请输入密码"
                ></el-input>
              </div>
              <el-button
                type="primary"
                style="width: 70%; margin-top: 60px; margin-left: 50px"
                @click="register()"
                >下一步</el-button
              >
            </div>
          </div>
        </div> 
      </div>
      <div class="Recommend_left">
        <div class="hd1">
          <i class="el-icon-star-on"></i>
          热门推荐
          <span class="rspan" @click="toP('H')">华语</span>
          <span class="rspan" @click="toP('L')">流行</span>
          <span class="rspan" @click="toP('Y')">摇滚</span>
          <span class="rspan" @click="toP('M')">民谣</span>
          <span class="rspan" @click="toP('D')">电子</span>
          <span
            style="float: right; font-size: 10px; cursor: pointer"
            @click="toplaylist()"
            >更多 <i class="el-icon-right" style="color: rgb(194, 12, 12)"></i
          ></span>
        </div>

        <ul class="k">
          <li
            v-for="item in recommends"
            class="kli"
            @click="toPlaylist(item.id)"
          >
            <div style="width: 140px; height: 140px" class="bottomfa">
              <img :src="item.picUrl" alt="" />
              <div class="bottom">
                <span class="el-icon-headset" style="float: left"></span>
                <span
                  >{{
                    (item.playCount - (item.playCount % 10000)) / 10000
                  }}万</span
                >
                <span class="el-icon-video-play" style="float: right"></span>
              </div>
            </div>
            <p>
              <a href="#">{{ item.name }}</a>
            </p>
          </li>
        </ul>
        <div style="margin-bottom: 35px; weight: 689px"></div>
        <div class="hd1">
          <i class="el-icon-star-on"></i>
          新碟上架
          <span
            style="float: right; font-size: 10px; cursor: pointer"
            @click="toalbum()"
            >更多 <i class="el-icon-right" style="color: rgb(194, 12, 12)"></i
          ></span>
        </div>

        <div
          style="weight；687px;height:186px;border:1px solid;margin:20px 0 37px 0"
          class="newtop"
        >
          <ul style="weight: 645px; height: 150px; margin-top: 28px">
            <li v-for="lists in topalbum" class="lili">
              <div class="kkk">
                <img :src="lists.artist.picUrl" alt="" />
              </div>
              <p>{{ lists.name }}</p>
              <p class="company">{{ lists.company }}</p>
            </li>
          </ul>
        </div>
        <div style="margin-bottom: 35px; weight: 689px"></div>
        <div class="hd1">
          <i class="el-icon-star-on"></i>
          榜单
          <span
            style="float: right; font-size: 10px; cursor: pointer"
            @click="totoplist()"
            >更多 <i class="el-icon-right" style="color: rgb(194, 12, 12)"></i
          ></span>
        </div>
        <Dislist :dislist="dislist"></Dislist>
      </div>
      <div class="Recommend_right">
        <div class="Re_top" v-if="iflogin == 0">
          <p
            style="
              width: 205px;
              height: 50px;
              padding: 16px;
              margin: 0 22.5px;
              font-size: 11px;
            "
          >
            登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机
          </p>
          <a
            href="#"
            style="
              display: block;
              height: 31px;
              margin-left: 30%;
              margin-top: 10%;
            "
            ><button style="height: 40px" @click="toLogin()">用户登录</button>
          </a>
        </div>
        <div
          class="Re_top"
          v-if="iflogin == 1"
          style="
            height: 165px;
            position: relative;
            background-color: rgb(247, 247, 247);
          "
        >
          <img
            :src="this.userk.img"
            alt=""
            width="80px"
            height="80px"
            style="margin: 15px 22.5px"
          />
          <span style="position: absolute; top: 20px"
            ><strong>{{ this.userk.nickname }}</strong></span
          >
          <span
            style="
              position: absolute;
              top: 40px;
              border: 1px solid;
              border-radius: 30px;
              font-size: 12px;
            "
            >LV7</span
          >
          <el-button type="primary" style="position: absolute; top: 60px"
            >签到</el-button
          >
          <div
            style="
              position: absolute;
              top: 120px;
              left: 30px;
              width: 34px;
              height: 37px;
            "
          >
            20动态
          </div>
          <div
            style="
              position: absolute;
              top: 120px;
              left: 100px;
              width: 34px;
              height: 37px;
            "
          >
            14关注
          </div>
          <div
            style="
              position: absolute;
              top: 120px;
              left: 170px;
              width: 34px;
              height: 37px;
            "
          >
            12粉丝
          </div>
        </div>
        <div
          class="Re_middle"
          style="height: 455px; width: 250px; margin-top: 15px"
        >
          <h3 style="margin: 0 20px; border-bottom: 1px solid">
            <span style="font-size: 12px; line-height: 22px">入驻歌手</span>
            <span
              href="#"
              style="
                display: block;
                float: right;
                font-size: 12px;
                line-height: 22px;
                cursor:pointer
              "
              @click="toHome()"
              >查看全部</span
            >
          </h3>
          <ul style="width: 230px; height: 380px; margin: 6px 0 14px 20px">
            <li
              v-for="item1 in homeartist"
              style="width: 210px; height: 62px; margin-top: 14px"
              class="klli"
            >
              <div style="display: block; width: 100%; height: 100%">
                <div style="float: left; width: 62px; height: 62px">
                  <img
                    :src="item1.picUrl"
                    alt=""
                    style="width: 62px; height: 60px"
                    @click="toArtist(item1.id)"
                  />
                </div>
                <div style="float: left">
                  <h4
                    style="
                      height: 22px;
                      width: 133px;
                      margin-top: 8px;
                      margin-left: 10px;
                    "
                  >
                    <span style="font-size: 14px"
                      ><strong>{{ item1.name }}</strong></span
                    >
                  </h4>
                  <p></p>
                </div>
              </div>
              <!-- <img :src="item1.picUrl" alt="" style="width:62px;height:62px" > -->
            </li>
          </ul>
          <div></div>
        </div>
        <div class="Re_bottom"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Dislist from "@/components/content/dislist/Dislist.vue";
import { getdislist } from "@/network/discover.js";
import axios from "axios";
export default {
  name: "Recommend",
  components: {
    Dislist,
  },
  data() {
    return {
      dislist: [],
      songlistid: "",
      loginbox: "1",
      //登录表单的数据绑定对象
      loginForm: {
        username: "",
        password: "",
      },
      reForm: {
        username: "",
        password: "",
        yzm:''
      },
      iflogin: "1",
      userk: {
        nickname: "",
        level: "",
        dongtai: "",
        guanzhu: "",
        fans: "",
        img: "",
      },
      regi: 1,
      il:1,
      ll:1
    };
  },
  props: {
    recommends: {
      type: Array,
      default() {
        return [];
      },
    },
    topalbum: {
      type: Array,
      default() {
        return [];
      },
    },
    homeartist: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  created() {
    getdislist().then((res) => {
      for (var a = 0; a <= 9; a++) {
        //  this.dislist[l]=res.playlist.tracks.name[l]}
        this.dislist.push(res.playlist.tracks[a]);
      }
    });
    axios({
      url: "http://localhost:3000/user/account",
      method: "get",
      params: {
        cookie: window.sessionStorage.cookie,
      },
    }).then((res) => {
      console.log(res);
      this.userk.nickname = res.data.profile.nickname;
      this.userk.img = res.data.profile.avatarUrl;
    });
    if (window.sessionStorage.cookie) {
      this.iflogin = 1;
    } else {
      this.iflogin = 0;
    }
  },
  methods: {
    toHome() {this.$router.push('/discover/artist/cat?id=1001')},
    register(){
      this.il=!this.il;
    this.ll=!this.ll
      axios({
        url:'http://localhost:3000/register/cellphone',
        params:{
        }
      })
    },
    toRegister() {
      this.regi = !this.regi;
      
    },
    toP(tag) {
      if (tag == "H") this.$router.push("/discover/playlist?cat=华语");
      if (tag == "L") this.$router.push("/discover/playlist?cat=流行");
      if (tag == "Y") this.$router.push("/discover/playlist?cat=摇滚");
      if (tag == "M") this.$router.push("/discover/playlist?cat=民谣");
      if (tag == "D") this.$router.push("/discover/playlist?cat=电子");
    },
    toPlaylist(id) {
      //跳转并携带数据
      this.songlistid = id;
      this.$router.push("/playlistdetail?id=" + id);
    },
    findId(id) {
      axios({
        url: "http://localhost:3000/playlist/detail",
        method: "get",
        params: {
          id, // id:id
        },
      }).then((res) => {
        var songid = res.data.playlist.tracks[0].id;
        this.$emit("sendUrl", songid);
      });
    },
    toLogin() {
      this.loginbox = !this.loginbox;
    },
    toplaylist() {
      this.$router.push("/discover/playlist");
    },
    toalbum() {
      this.$router.push("/discover/album");
    },
    totoplist() {
      this.$router.push("/discover/toplist");
    },
    login() {
      this.$refs.loginFormRef.validate((valid) => {
        if (!valid) return;
        axios({
          url: "http://localhost:3000/login/cellphone",
          method: "get",
          params: {
            phone: this.loginForm.username,
            password: this.loginForm.password,
          },
        }).then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            window.sessionStorage.setItem("cookie", res.data.cookie);

            this.loginbox = !this.loginbox;
            this.$router.push("/discover");
            location.reload();
          } else alert("登录失败");
        });
      });
    },
    loginE() {
      this.$refs.loginFormRef.validate((valid) => {
        if (!valid) return;
        axios({
          url: "http://localhost:3000/login",
          method: "get",
          params: {
            email: this.loginForm.username,
            password: this.loginForm.password,
          },
        }).then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            window.sessionStorage.setItem("cookie", res.data.cookie);

            this.loginbox = !this.loginbox;
            this.$router.push("/discover");
            location.reload();
          } else alert("登录失败");
        });
      });
    },
    // register() {
    //   this.$refs.loginFormRef.validate((valid) => {
    //     if (!valid) return;
    //     axios({
    //       url: "http://localhost:3000/register/cellphone",
    //       method: "get",
    //       params: {
    //         phone: this.loginForm.username,
    //         password: this.loginForm.password,
    //       },
    //     }).then((res) => {
    //       console.log(res);
    //       if (res.data.code == 200) {
    //         window.sessionStorage.setItem("cookie", res.data.cookie);

    //         this.loginbox = !this.loginbox;
    //         this.$router.push("/discover");
    //         location.reload();
    //       } else alert("登录失败");
    //     });
    //   });
    // },
  },
};
</script>
<style>
.rspan {
  font-size: 12px;
  margin-left: 10px;
  padding-right: 8px;
  color: rgb(195, 195, 197);
  cursor: pointer;
}
.loginbox {
  position: absolute;
  width: 530px;
  height: 372px;
  top: 317px;
  left: 532px;
  z-index: 9998;
  border: solid 1px;
  border-radius: 4px;
  background-color: #fff;
}
.loginbox_header {
  display: block;
  width: 530px;
  height: 40px;
  background-color: rgb(45, 45, 45);
  line-height: 40px;
  color: #fff;
  padding-left: 5px;
}
.klli {
  background-color: rgb(250, 250, 250);
  border: solid 1px rgb(216, 216, 216);
}
button {
  background-color: rgb(234, 40, 48);
  height: 31px;
  color: rgb(245, 245, 245);
  width: 99px;
}
.Re_top {
  height: 126px;
  width: 100%;
  background-color: rgb(230, 230, 230);
}
* {
  margin: 0;
  padding: 0;
  /* css3盒子模型 */
  box-sizing: border-box;
}
/* 去掉li 的小圆点 */
li {
  list-style: none;
}
a {
  color: #666;
  text-decoration: none;
}
.abc {
  background-color: #e4e7ed;
}
.el-icon-star-on {
  color: rgb(193, 13, 12);
}
.Recommend {
  background-color: #fff;
  height: 1425px;
  width: 982px;
  margin: 0 auto;
}
.Recommend_left {
  width: 729px;
  height: 100%;
  padding: 20px;
  float: left;
}
.hd1 {
  font-size: 20px;
  margin: 0px 10px 0px 20px;
  border-bottom: 2px solid #c10d0c;
}
.kli {
  float: left;
  width: 140px;
  height: 204px;
  margin-left: 21px;
  margin-bottom: 30px;
}
.kli img {
  width: 140px;
  height: 140px;
}
.bottomfa {
  position: relative;
}
.k {
  margin-top: 20px;
  height: 468px;
}
.k p {
  width: 140px;
  height: 38px;
  margin-top: 8px;
  margin-bottom: 3px;
  font-size: 14px;
}
.newtop {
  background-color: rgb(245, 245, 245);
}
.lili {
  width: 118px;
  height: 150px;
  margin-left: 11px;
  float: left;
}
.lili img {
  width: 118px;
  height: 100px;
}
.lili p {
  font-size: 12px;
}

/* Right */
.Recommend_right {
  width: 253px;
  height: 920px;
  float: left;
  border: 1px solid rgb(216, 216, 216);
}
.bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 27px;
  background-color: rgb(66, 58, 55, 0.7);
  padding: 8px;
  color: rgb(204, 204, 204);
  line-height: 12px;
  font-size: 12px;
}
.company {
  color: #666;
  font-size: 10px;
}
</style>
